<template>
  <el-dialog :visible.sync="isShow" width="1000px">
    <el-tabs type="border-card" v-model="tabName" @tab-click="handleTabClick">
      <el-tab-pane label="商品条件查询" name="itemFilter" v-if='activityCateShow'>
        <el-form :model="searchParams_itemFilter" ref="searchParams" :inline="true">
          <el-form-item label="分类">
            <el-select v-model="searchParams_itemFilter.shopinCate" placeholder="请选择" clearable>
              <el-option v-for="item in shopinCateOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动">
            <el-select v-model="searchParams_itemFilter.activity" placeholder="请选择" clearable>
              <el-option v-for="item in activityCateOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch_itemFilter" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="useItemFilter('itemFilter')" type="primary" style="margin-left:40px">应用此筛选条件</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-bottom: 20px;color: red;">筛选条件为：{{itemFilter?itemFilter:'未筛选'}}</div>
        <el-table :data="itemList_itemFilter" row-key="id" tooltip-effect="dark" size='medium' border>
          <el-table-column prop="id" label="id" width="100px" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cover" label="商品图片" show-overflow-tooltip>
          <template slot-scope="scope"><img width="50" height="50" :src="scope.row.coverUrl"></template>
          </el-table-column>
          <el-table-column prop="itemName" label="商品名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sellingPrice" label="实际销售价" show-overflow-tooltip></el-table-column>
          <el-table-column prop="marketPrice" label="官网价" show-overflow-tooltip></el-table-column>
          <el-table-column prop="shopinCateModel.name" label="商品分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="activityModel.name" label="参加活动" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-col style="margin: 20px 0;">
          <pagination
            style="background: #ffffff; height: 50px"
            v-show="totalSize_itemFilter > 0"
            :total="totalSize_itemFilter"
            :page.sync="page_itemFilter"
            :limit.sync="size_itemFilter"
            @pagination="findItemListRemoveActivity"
          />
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="商品" name="item" v-if='itemShow'>
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="商品名称" prop="itemName">
            <el-input class="input" v-model="searchParams.itemName" maxlength='20' placeholder="请输入" clearable show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchParams.shopinCate" placeholder="请选择" clearable>
              <el-option v-for="item in shopinCateOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动">
            <el-select v-model="searchParams.activity" placeholder="请选择" clearable>
              <el-option v-for="item in activityCateOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="itemList" row-key="id" tooltip-effect="dark" size='medium' border>
          <el-table-column prop="id" label="id" width="100px" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cover" label="商品图片" show-overflow-tooltip>
          <template slot-scope="scope"><img width="50" height="50" :src="scope.row.coverUrl"></template>
          </el-table-column>
          <el-table-column prop="itemName" label="商品名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sellingPrice" label="实际销售价" show-overflow-tooltip></el-table-column>
          <el-table-column prop="marketPrice" label="官网价" show-overflow-tooltip></el-table-column>
          <el-table-column prop="shopinCateModel.name" label="商品分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="activityModel.name" label="活动分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="redact" label="操作" width="120px">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="handleSelect(scope.row, 'item')" size='medium'>选择</el-button>
              </div>
              </template>
          </el-table-column>
        </el-table>
        <el-col style="margin: 20px 0;">
          <pagination
            style="background: #ffffff; height: 50px"
            v-show="totalSize > 0"
            :total="totalSize"
            :page.sync="page"
            :limit.sync="size"
            @pagination="findItemListRemoveActivity"
          />
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  </template>
  
  <script>
  import {
      findShopinCateList
  } from '@/api/merchant/shopinCate.js'
  import { findActivityList } from "@/api/merchant/activity.js";
  import { findItemListRemoveActivity } from '@/api/merchant/item.js'
  export default {
    components: {
    },
    props:{
      name: {
        type: String,
        default : ''
      },
    },
    data() {
      return {
          isShow: false,
          tabName: '',
          currentDialog: '',
          shopinCateList: [],
          activityList: [],
          types: {fixed_price: '一口价', discount: "打折", verticalItemAwardRate: '直推购买商品赚收益活动'},
          page_itemFilter: 1,
          size_itemFilter: 10,
          totalSize_itemFilter: 0,
          searchParams_itemFilter: {},
          searchParams_activity: {},
          itemList_itemFilter:[],
          itemFilter: '',
          page: 1,
          size: 10,
          totalSize: 0,
          searchParams: {},
          itemList:[],
          shopinCateOptions: [],
          activityCateOptions: [],
          activityCateShow: true,
          itemShow: true
      }
    },
    created(){
      this.findShopinCateList()
      this.findActivityList()
      this.findItemListRemoveActivity()
      // this.findActivityItemList()
      this.handleSearch_itemFilter()
    },
    methods:{
      show(currentDialog){
        this.searchParams_itemFilter = {}
        this.searchParams = {}
        this.searchParams_activity = {}
        this.itemFilter = ''
        this.isShow = true
        if(this.name == 'banner' || this.name == 'grid'){
          this.tabName = 'itemFilter'
          this.activityCateShow = true
          this.itemShow = true
        }else if(this.name == 'itemGrid'){
          this.activityCateShow = false
          this.tabName = 'item'
          this.itemShow = true
        }else if(this.name == 'itemList' || this.name == 'itemCate'){
          this.tabName = 'itemFilter'
          this.activityCateShow = true
          this.itemShow = false
        }
      },
      close(){
          this.isShow = false
      },
      handleTabClick(){

      },
      // 选择
      handleSelect(e, type){
          this.close()
          this.$emit('handleSelect', e, type)
      },
      // 使用次筛选条件
      useItemFilter(type){
        this.close()
        this.$emit('handleSelect', this.itemFilter, type)
      },
      /************************分类列表***********************/
      findShopinCateList(){
        findShopinCateList().then(res => {
            if(res.data.code==10000){
              this.shopinCateList = res.data.data.list
              this.shopinCateOptions = res.data.data.list
            }
        });
      },
      handleSearch_itemFilter(){
        this.page_itemFilter = 1
        var keys = Object.keys(this.searchParams_itemFilter)
        var filter = ''
        for(var key of keys){
          if(key=='page' || key=='size' || !this.searchParams_itemFilter[key]) continue
          filter = filter + key + '=' + this.searchParams_itemFilter[key] + '&'
        }
        this.itemFilter = filter.substring(0, filter.length-1)
        this.findItemList_itemFilter()
      },
      // 查询商品列表
      findItemList_itemFilter() {
        this.searchParams_itemFilter.page = this.page_itemFilter
        this.searchParams_itemFilter.size = this.size_itemFilter
        findItemListRemoveActivity(this.searchParams_itemFilter).then(res => {
          if(res.data.code == 10000){
            this.totalSize_itemFilter = res.data.data.total_count
            this.itemList_itemFilter = res.data.data.list
          }
        })
      },
      /************************活动列表***********************/
      findActivityList(){
          findActivityList({
            isGroup: 0
          }).then(res => {
              if(res.data.code == 10000){
                  this.activityList = res.data.data.list
                  this.activityCateOptions = res.data.data.list
              }
          });
        },
      /************************普通商品***********************/
      /** 搜索按钮操作 */
      handleSearch(){
        this.page = 1
        this.findItemListRemoveActivity()
      },
      // 查询商品列表
      findItemListRemoveActivity() {
        this.searchParams.page = this.page
        this.searchParams.size = this.size
        findItemListRemoveActivity(this.searchParams).then(res => {
          if(res.data.code == 10000){
            this.totalSize = res.data.data.total_count
            this.itemList = res.data.data.list
          }
        })
      },

      // 查询活动商品
      findActivityItemList() {
        this.searchParams_activity.page = this.page_activity
        this.searchParams_activity.size = this.size_activity
        this.searchParams_activity.type = 'activityItem'
        findItemListRemoveActivity(this.searchParams_activity).then(res => {
          if(res.data.code == 10000){
            this.totalSize_activity = res.data.data.total_count
            // var list = []
            // for(var item of res.data.data.list){
            //   item.itemModel.activityItemId = item.id
            //   item.itemModel.sellingPrice = item.itemModel.activityPrice
            //   list.push(item.itemModel)
            // }
            this.itemList_activity = res.data.data.list
          }
        });
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>

  </style>
  